<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tool Box</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="plugins/fontawesome-free/css/fontawesome.min.css" rel="stylesheet">
    <link href="plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="adminLTE/css/adminlte.min.css" rel="stylesheet">
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/toastr/toastr.min.js"></script>

    <style>
        .login-container {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: table;
        }

        .login-col {
            display: table-cell;
            vertical-align: middle;
        }

        .login-box {
            border-color: #ddd;
            border-radius: 20px;
            box-shadow: 0 0 20px #ddd;
            width: 400px;
            height: 270px;
            margin-left: auto;
            margin-right: auto;
            padding: 20px;
        }

        .login-box .form-control:focus {
            border-color: #6c757d;
        }

        .login-title {
            color:#666;
            font-size: 30px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        .login-devide {
            background-color: #f5f5f5;
            height: 2px;
            margin-bottom: 1rem;
            margin-top: -0.5rem;
        }
    </style>

</head>
<body>
<div class="login-container">
    <div class="login-col">
        <form class="login-box">
            <div class="form-group">
                <span class="login-title">Tool-Box</span>
            </div>
            <div class="login-devide"></div>
            <div class="form-group">
                <input id="user" type="text" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
                <input id="pass" type="password" class="form-control" placeholder="密码">
            </div>
            <div class="form-group">
                <button id="login" type="button" class="btn btn-outline-secondary" style="width: 100%">登录</button>
                <!--<button id="forget" type="button" class="btn btn-danger" style="width: 100%; margin-top: 7px;">忘记密码</button>-->
            </div>
        </form>
    </div>
</div>

<script src="cloud/js/common.js"></script>
<script>
    var LoginManage = {
        validate: function () {
            var username = $("#user").val();
            var password = $("#pass").val();
            var validate = true;
            if (username === "" || username === undefined) {
                //$("#user").addClass("is-invalid");
                validate = false;
            } else {
                //$("#user").addClass("is-valid");
            }
            if (password === "" || password === undefined) {
                //$("#pass").addClass("is-invalid");
                validate = false;
            } else {
                //$("#pass").addClass("is-valid");
            }
            if (!validate) {
                return undefined;
            }
            return {username: username, password: password};
        },
        login: function() {
            var loginInfo = this.validate();
            if (loginInfo === undefined) return;

            $.ajax({
                url: Url.baseService.login,
                type: HttpMethod.post,
                data: loginInfo,
                success: function (result, status, xhr) {
                    window.location.href = Url.ui.iframe;
                },
                beforeSend: function (xhr) {
                    $("#user").attr("disabled", "disabled");
                    $("#pass").attr("disabled", "disabled");
                    $("#login").attr("disabled", "disabled");
                },
                complete: function (xhr, ts) {
                    $("#user").removeAttr("disabled");
                    $("#pass").removeAttr("disabled");
                    $("#login").removeAttr("disabled");
                }
            });
        },
        bind: function () {
            var self = this;
            $("body").bind("keypress", function (ev) {
                if(ev.keyCode === 13) {
                    $("#login").trigger("click");
                }
            });
            $("#login").bind("click", function () {
                self.login();
            });
        }
    };

    LoginManage.bind();
</script>

</body>
</html>